window.addEventListener('load', function() {

    // 封装一个获取对象函数
    function getdom(cssSelector) {
        var dom = document.querySelectorAll(cssSelector);
        if (dom.length === 0) {
            return null;
        }

        if (dom.length === 1) {
            return dom[0];
        }

        return dom;
    }

    // 封装一个获取计算以后样式属性值的方法
    function getStyle(dom, attr) {
        return window.getComputedStyle(dom)[attr];
    }


    // 渲染
    var newArr1 = heroList.map(function(item) {
        // 定义一个空字符串
        var str = "";

        // 拼接字符串

        str += '<li><a href="javascript:;"><img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + item.ename + '/' + item.ename + '.jpg" width="91" height="91" alt=" ' + item.cname + '">' + item.cname + '</a> </li>'


        // 返回字符串
        return str;
    });

    // 设置标签内容
    getdom('.herolist').innerHTML = newArr1.join("");

    var ms_radio = getdom('.ms-radio');
    var ms_radiois = getdom('.ms-radio i');

    // 按钮排他
    for (var i = 0; i < ms_radiois.length; i++) {
        var bgc = window.getComputedStyle(ms_radiois[i]).backgroundColor;
        // 设置自定义属性
        // ms_radiois[i].dataset.index = i;

        ms_radiois[i].addEventListener('click', function() {
            for (var j = 0; j < ms_radiois.length; j++) {
                ms_radiois[j].classList.remove('is');
            }
            this.classList.add('is');
            // 获取内置属性
            var index = this.getAttribute('data-type');
            // var index1 = this.getAttribute('data-ptype');
            console.log(index);

            var newArr1 = heroList.map(function(item) {
                // 定义一个空字符串
                var str = "";

                // 拼接字符串
                // 英雄分类
                if (item.hero_type == index || item.hero_type2 == index) {
                    str += '<li><a href="javascript:;"><img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + item.ename + '/' + item.ename + '.jpg" width="91" height="91" alt=" ' + item.cname + '">' + item.cname + '</a> </li>'
                }

                if (item.new_type == index) {
                    str += '<li><a href="javascript:;"><img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + item.ename + '/' + item.ename + '.jpg" width="91" height="91" alt=" ' + item.cname + '">' + item.cname + '</a> </li>'
                }

                if (item.pay_type == index) {
                    str += '<li><a href="javascript:;"><img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + item.ename + '/' + item.ename + '.jpg" width="91" height="91" alt=" ' + item.cname + '">' + item.cname + '</a> </li>'
                }
                // 返回字符串
                return str;
            });
            getdom('.herolist').innerHTML = newArr1.join("");
        })
    }


    // 搜素框功能
    var search = getdom('#search');
    search.addEventListener('focus', function() {
        search.value = '';
    })
    search.addEventListener('blur', function() {
        search.value = '请输入你想要搜索的英雄名';
    })

    search.addEventListener('input', function() {

        var newArr1 = heroList.map(function(item) {
            // 定义一个空字符串
            var str = "";

            // 拼接字符串 做名字判断
            if (String(item.cname).includes(search.value)) {
                str += '<li><a href="javascript:;"><img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + item.ename + '/' + item.ename + '.jpg" width="91" height="91" alt=" ' + item.cname + '">' + item.cname + '</a> </li>';

                for (var i = 0; i < ms_radiois.length; i++) {
                    for (var j = 0; j < ms_radiois.length; j++) {
                        ms_radiois[j].classList.remove('is');
                    }
                    ms_radiois[2].classList.add('is');
                }

            }

            // 返回字符串
            return str;
        });
        getdom('.herolist').innerHTML = newArr1.join("");
    })
})